%display-flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
%flex-direction--column{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
%border-box{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
%flex-1{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
%align-items--flex-start{
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
%align-items--center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
%align-items--flex-end{
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-align-items:center;
    -o-align-items:center;
    align-items: flex-end;

}
%justify-content--space-between{
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
}
%justify-content--flex-start{
	-webkit-box-pack:start;
	-ms-flex-pack:start;
	justify-content:flex-start;
}
%justify-content--center{
    justify-content:center;
     -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
}
%justify-content--flex-end{
	-webkit-box-pack:end;
	-ms-flex-pack:end;
	justify-content:flex-end;
}
// 点击扩展区域
%extend-click{
	position: relative;
  &:before{
	content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }
}
// 安卓 不同dpr下 1px线样式
@media screen and (webkit-min-device-pixel-radio: 1.5),(min-device-pixel-radio: 1.5){
	.bt-1px{
		&::before{
			-webkit-transform: scaleY(0.7);
	        transform: scaleY(0.7);
	    }
  	}
  	.bb-1px{
		&::after{
			-webkit-transform: scaleY(0.7);
	        transform: scaleY(0.7);
	    }
  	}
    .br-1px{
    &::after{
      -webkit-transform: scaleY(0.7);
          transform: scaleY(0.7);
      }
    }
}
@media screen and (webkit-min-device-pixel-radio: 2),(min-device-pixel-radio: 2){
	.bt-1px{
		&::before{
			-webkit-transform: scaleY(0.5);
	        transform: scaleY(0.5);
	    }
  	}
  	.bb-1px{
		&::after{
			-webkit-transform: scaleY(0.5);
	        transform: scaleY(0.5);
	    }
  	}
    .br-1px{
    &::after{
      -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
      }
    }
}
